<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="listQuery.workstation" placeholder="请选择车间" clearable style="width: 200px" class="filter-item">
        <el-option v-for="item in selectOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-date-picker
        v-model="listQuery.datetime"
        type="date"
        placeholder="请输入时间" class="filter-item">
      </el-date-picker>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="info" icon="el-icon-refresh" @click="handleReset">
        重置
      </el-button>
    </div>
    <el-row>
      <div ref="chart" class="chart" :style="chartStyle" />
    </el-row>
  </div>
</template>
<script>
import echarts from 'echarts'
import resize from '../mixins/resize'
import { fetchList } from '@/api/bdc/bdc-monitor'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
const selectOptions = [
  { key: 'HZ11_20', label: '焊装车间' },
  { key: 'TZ11_20', label: '涂装车间' },
  { key: 'ZZ11_20', label: '总装车间' }
]
const animationDuration = 3000
export default {
  name: 'MonthlyHpvEffectChart',
  directives: { waves },
  mixins: [resize],
  data() {
    return {
      // 查询模块
      listQuery: {
        workstation: undefined,
        datetime: undefined
      },
      selectOptions: selectOptions,
      // echarts
      chart: null,
      chartStyle: {height: '500px', width: '100%'},
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    // test
    this.chartData = {
      // expectedData: [20, 20, 20, 20, 0, 20, 20, 20, 20, 0, 20, 20, 20],
      actualData: [10, 14, 9, 3, 36],
    }
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(res => {
        if (res.code == 200) {
          this.list = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error('服务器内部错误！');
        }
        this.listLoading = false
      })
    },
    // 查询
    handleFilter() {
      // this.getList()
      this.chartData = {
        actualData: this.randomNumArr(12, 4),
      }
      this.chartData.actualData.push(this.sumNumArr(this.chartData.actualData, 4))
      this.setOptions(this.chartData)
    },
    randomNumArr(limit, length) {
      const numArr = []
      for (let i = 0; i < length; i++) {
        const element = Math.ceil(Math.random() * limit)
        numArr.push(element)
      }
      return numArr;
    },
    // 重置
    handleReset() {
      this.listQuery = {
        workstation: undefined,
        datetime: undefined
      }
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.setOptions(this.chartData)
    },
    sumNumArr(numArr, index) {
      let sum = 0;
      for (let i = 0; i < index; i++) {
        const element = numArr[i];
        sum += element;
      }
      return sum;
    },
    setOptions({ expectedData, actualData } = {}) {
      const auxiliaryData = [];
      for (let i = 0; i < actualData.length; i++) {
        const element = actualData[i];
        let item;
        if (i === actualData.length - 1) {
          item = 0
        } else {
          item = this.sumNumArr(actualData, i)
        }
        auxiliaryData.push(item)
      }
      this.chart.setOption({
        // 配置x轴点位显示居中还是居左
        xAxis: {
          type: 'value',
          // splitLine: {
          //   show: false
          // },
          // boundaryGap: false,
          axisTick: {
            show: true
          }
        },
        // 控制坐标轴位置
        // grid: {
        //   left: 10,
        //   right: 10,
        //   bottom: 20,
        //   top: 30,
        //   containLabel: true
        // },
        // 控制点hover显示
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'cross'
          // },
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            var tar = params[1];
            return tar.axisValue + ' : ' + tar.value;
          }
        },
        yAxis: {
          data: ['理论HPV', '产量差异', '人员影响', '停线影响', '实际HPV'],
          axisTick: {
            show: false
          },
          // splitLine: {
          //   show: true
          // },
        },
        // 控制分项线条显示，对应series.name
        // legend: {
        //   data: ['理论JPH', '实际JPH']
        // },
        series: [
        {
          name: '辅助',
          type: 'bar',
          stack:  '总量',
          animationDuration: 2800,
          barWidth: '60%',
          itemStyle: {
              normal: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
              },
              emphasis: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
              }
          },
          data: auxiliaryData
        },
        {
          name: '总量', 
          stack:  '总量',
          type: 'bar',
          data: actualData,
          barWidth: '60%',
          animationDuration: 2800,
          itemStyle: {
            normal: {
              color: (params) => {
                if (params.dataIndex === 0) {
                  return '#ccc';
                } else if (params.dataIndex === 4) {
                  return 'green';
                } else {
                  return 'orange';
                }
              },
              // lineStyle: {
              //   color: '#000',
              //   width: 2
              // },
              // 显示点值
              label: {
                show: true,
                position: 'right'
              }
            }
          },
        }]
      })
    }
  }
}
</script>